@import '../../../../styles/breakpoints';

.sortable-data-operation-list-item {
    position: relative;
    display: flex;
    align-items: center;
    height: auto;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    
    &-container {
      width: -webkit-fill-available;
      width: -moz-available;

      &-header {
        display: flex;
        justify-content: space-between;
        padding: 0rem 1rem;

        &-title {

        }

        &-options {
          display: flex;
          padding: 1rem;

          &-main {
            display: flex;
            height: min-content;
            width: max-content;
            border: 1px solid var(--almostWhite);
            padding: 0.1rem;
            border-radius: 0.25rem;
            margin-left: 1rem;

            button {
              width: 3rem;
              padding: 0.3rem 0;
            }

            .close:hover {
              background-color: var(--danger);
              color: white;
            }

            .copy:hover {
              background-color: var(--info);
              color: white;
            }

            button.render-form-button {
              background-color: transparent;
              border: none;
            }
            
            button.render-form-button:hover {
              background-color: var(--dark);
              color: var(--white);
              cursor: pointer;
            }
          }
        }
      }

      &-user-info {
        padding: 0 1rem;
        font-style: italic;
        font-size: small;
        p {
          text-overflow: ellipsis;
          overflow: hidden;
          max-height: 1.5rem;
          margin: 0;
          overflow-wrap: break-word;
        }
      }

      &-form {
        .advice-1 {
          color: var(--lessWhite);
          margin: 0 0 0 1rem;
        }
        &-advanced {
          &-ops {
            display: flex;
            justify-content: space-between;
            padding: 1rem 2rem 1rem 1rem;

            .drop-down {
              width: 3rem;
              background-color: transparent;
              border: none;
            }

            .drop-down:hover {
              background-color: var(--dark);
              color: white;
            }
          }

          .advice-2 {
            margin: 0 0 1rem 1rem;
            color: var(--lessWhite);
          }

          &-params {

          }
        }
      }
    }
  }

// this is to hide arrow hints when user is in experiments and visualizations
.pipe-line-execution-container:not(.data-pipeline) {
  & .sortable-data-operation-list-item::before,
  & .sortable-data-operation-list-item::after {
    border: none;
  }

  & .sortable-data-operation-list-item-arrow,
  & .sortable-data-operation-list-item-separator {
    display: none;
  }
}

@media (max-width: $bp-sm) {
  .sortable-data-operation {
    &-list-item {
      display: unset;
    }
  }
}  